import { CSSProperties, Fragment } from 'react'
// import { useNavigate } from 'react-router-dom'
import {
  Statistic, 
  Row,
  Col,
} from 'antd'
import { 
  UserOutlined,
  EditOutlined,
  LikeOutlined,
  FormOutlined,
} from '@ant-design/icons';

interface IProps {
  children?: any;
}

// const contentStyle: CSSProperties= {
//   color: '#fff',
//   lineHeight: '160px',
//   textAlign: 'center',
//   background: '#364d79',
// };

/**
 * 文章相关的可视化图标
 */
export default function HighlightNumbers (props: IProps) {

  return (
    <Fragment>
      <Row gutter={16} style={{ marginBottom: '20px', color: '#1890ff' }} >
        <Col className="gutter-row" span={6}>
          <div className="my-gutter-box" >
            <Statistic 
              title="项目" value={27} 
              prefix={<UserOutlined style={{ fontSize: '20px' }} />} 
            />
          </div>
        </Col>
        <Col className="gutter-row" span={6}>
          <div className="my-gutter-box" >
            <Statistic 
              title="用户" value={65} 
              prefix={<EditOutlined style={{ fontSize: '20px' }} />} 
            />
          </div>
        </Col>
        <Col className="gutter-row" span={6}>
          <div className="my-gutter-box" >
            <Statistic 
              title="点赞" value={345} 
              prefix={<LikeOutlined style={{ fontSize: '20px' }} />} 
            />
          </div>
        </Col>
        <Col className="gutter-row" span={6}>
          <div className="my-gutter-box" >
            <Statistic 
              title="评论" value={578} 
              prefix={<FormOutlined style={{ fontSize: '20px' }} />} 
            />
          </div>
        </Col>
      </Row>
    </Fragment>
  )
}